<template>
<div v-if="content">
  <section :class="['detail-warp f-pk',content.serverdata.length!=0 && 'det-serve-wrap']"><!-- -->
    <p class="detail-bg-img f-w100 f-pa f-mp0 bg" :style="`background:url(${content.bigimage[0]}) no-repeat center top/100%`"></p>
    <div class="f-pa f-w100 detail-top-wrap">
      <header class="f-cfff">
        <p class="iconfont f-dfc icon-back f-fs16" @click="$router.back(-1)">{{title}}</p>
      </header>
      <div class="detail-top f-pr f-dfc f-tal">
        <img class="detail-top-img bg" :src="content.micon" alt="详情图标">
        <div class="detail-item f-fx1 f-dfc">
          <p class="det-name f-cfff f-mp0">{{content.name}}</p>
          <p class="f-fs14 f-b7b det-downs">
            <span>{{content.downloads}}次下载</span>&nbsp;&nbsp;/
            <span>{{content.adsize}}</span>
          </p>
          <p class="f-b7b det-rate f-mp0">
            <span><i class="f-ffd f-fs18">{{content.star_mean}}</i>分（{{content.evaluatedata.star_all_num}}人评）</span>
            <span><i class="f-ffd f-fs18">{{content.ad_min_rate||content.ios_min_rate}}</i>折起</span>
          </p>
        </div>
      </div>
      <ul class="f-dfc det-serve f-cfff f-fs14 f-tac" v-if="content.serverdata.length!=0">
        <li v-for="(item,ind) in content.serverdata" :key="ind">
          <p class="f-mp0">{{item.sertime | filterServerTime}}</p>
          <p class="f-mp0">{{item.sername}}</p>
        </li>
      </ul>
    </div>
  </section>
  <section class="detail-label">
    <h3 class="f-dfc">游戏标签：<span v-for="(item,index) in content.label" :key="index" class="f-ib f-fs12 f-666">{{item.name}}</span></h3>
  </section>
  <!--<div class="f-dfc f-tac detail-rank" v-if="content">
    <p class="f-fx1"><i class="f-db f-fs18">{{content.star_mean}}</i>{{content.evaluatedata.star_all_num}}条评分</p>
    <p class="f-fx1"><i class="f-db f-fs18">{{content.downloads}}</i>下载量</p>
    <p class="f-fx1"><i class="f-db f-fs18">{{content.ios_min_rate||content.ad_min_rate}}</i>最低折扣</p>
    <p class="f-fx1"><i class="f-db f-fs18">{{content.adsize}}</i>游戏大小</p>
  </div>-->
  <!--<mt-navbar v-model="selected">
    <mt-tab-item id="1">详情</mt-tab-item>
    <mt-tab-item id="2">VIP表</mt-tab-item>
    <mt-tab-item id="3">评论</mt-tab-item>
    <mt-tab-item id="4">礼包</mt-tab-item>
  </mt-navbar>-->
  <section class="detail-content">
  <swiper :options="swiperServe">
    <swiper-slide class="swiper-slide swiper-serve" v-for="(item,ind) in content.bigimage" :key="ind">
      <img :src="item" class="bg" alt="游戏详情图片">
      </swiper-slide>
  </swiper>
  <h3>游戏简介</h3>
  <div class="f-fs14 detail-descr">{{content.description | repHtml}}</div>
  <div v-if="content.paynotice[1]">
    <h3>充值活动</h3>
    <ul class="detail-paynotice f-fs14">
      <router-link v-for="(item,ind) in content.paynotice" :key="ind" tag="li" :to="'/notice/'+item.id" class="f-dfc detail-paynotice-item">
        <div class="f-dfc f-fx1 det-pay-left">
          <p>{{item.title}}</p>
          <p>{{item.create_time | formatDate}}</p>
        </div>
        <div class="iconfont icon-arrow"></div>
      </router-link>
    </ul>
  </div>
  <div v-if="content.vipdata">
  <h3>VIP等级表</h3>
  <ul class="f-dfc det-vip">
    <li v-for="(item,index) in content.vipdata" :key="index">
      <p class="det-vip-level f-fs16">{{item.vipname}}</p>
      <p class="det-vip-price f-fs14">￥{{item.vipprice}}</p>
    </li>
  </ul>
  </div>
  <div v-if="content.evlist[1]">
  <h3>游戏评论</h3>
  <ul class="comment f-fs2">
    <li v-for="(item,index) in content.evlist" :key="index" class="border-b">
      <p class="f-dfc"><img :src="item.face_url" alt="">{{item.nickname}}<span class="time f-tar">{{item.ev_time | formatDate}}</span></p>
      <p class="line-15" v-html="item.ev_content"></p>
    </li>
  </ul>
  </div>
  <div v-if="content.libaoinfo">
  <h3>游戏礼包</h3>
  <ul class="gift-list">
      <li v-for="(item,index) in content.libaoinfo" :key="index" class="border-b">
        <h4 class="f-fs14">{{item.title}}</h4>
        <p class="f-thd gift-desc">{{item.content}}</p>
        <p>剩余：<span class="gift-list-pro f-ib"><i class="f-ib" :style="{width:parseInt((+item.get_num / +item.total)*100)+'%'}">&nbsp;</i></span>&nbsp;<em>{{parseInt((+item.get_num / +item.total)*100)}}%</em></p>
      </li>
  </ul>
  </div>
  </section>
  <!--<mt-tab-container v-model="selected" v-if="content" class="tab-container">
    <mt-tab-container-item id="1" class="detail-one">
    </mt-tab-container-item>
    <mt-tab-container-item id="2">
      <img :src="content.vipimg" class="f-w100" v-if="content.vipimg">
      <img v-else src="../assets/sbg.png" class="empty f-db"/>   
    </mt-tab-container-item>
    <mt-tab-container-item id="3">
    </mt-tab-container-item>
    <mt-tab-container-item id="4">
    </mt-tab-container-item>
  </mt-tab-container>-->
  <router-link to="/download" class='f-dfc f-pf f-fs16 download f-w100'>下载APP</router-link>
  <!--<mt-popup position="bottom" class="f-w100 vou-pop" v-model="ispup">
    <h4 class="f-fs3 vou-pop-tit">抵扣券列表</h4>
    <vou-list v-if="content" :data="content.gamevoucherlist" :istop="false"/>  
  </mt-popup>-->  
</div>
</template>
<script>
export default {
  name: 'detail',
  data () {
    return {
      content:null,
      comment:null,
      gift:null,
      title:'',
      swiperServe: {
          autoplay: {
              disableOnInteraction: false,
          },/**/
          spaceBetween : 20,
          slidesPerView : 2
      },
      selected:'1'
    }
  },
  methods: {
    
  },
  created (){
    if(sessionStorage.title){
      this.title=sessionStorage.title;
    }
    this.$ajax.Detail.main(this.$route.params.id).then(({data:{data:content}})=>{
      this.content=content;
    })
  },
  beforeRouteEnter (to, {meta:{backTitle}}, next) {
    //console.log(from);
    if(backTitle){
      sessionStorage.title=backTitle;
    }
    next(vm => {
      // 通过 `vm` 访问组件实例
      //console.log(vm)
      if(backTitle){
        vm.title=backTitle;
      }
    })/**/
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.f-b7b{
  color:#B7B7B7;
}
.f-ffd{
  color:#FFDF4C;
}
.download{
    z-index: 100;
    justify-content: center;
    bottom:0;
    color: #21201d;
    background: #ffc904;  
    padding: 20px 0;
}
.vou-pop{
  max-height: 70%;
  overflow-y: scroll;
}
.det-vip,.det-serve{
  overflow-x: scroll;
}
.det-vip{
  li{
    background-color: #F4F5F6;
    margin-right: 20px;
    padding:0 60px;
    border-radius: 10px;
    p{
      margin:20px 0;
    }
  }
}
.det-vip-level{
  text-transform:uppercase;
}
.det-vip-price{
  color:#FF002A;
}
.vou-pop-tit{
  padding-left: .185185rem;
  line-height: 3;
}
.vou-img{
  margin:.37037rem auto 0;
}
.f-w50{
  width:45%;
  margin:.37037rem 1% 0;
}
.border-b,.mint-navbar{
  border-bottom: 1px solid #eee;
}
.det-name{
  font-size: 20PX;
}
.detail-content{
  padding: 0 20px;
  margin-bottom: 100px;
}
.detail-item{
  flex-direction: column;
  align-items: flex-start;
}
.detail-label{
  padding:10px 20px;
  span{
    font-weight: normal;
    padding:5px 20px;
    margin:0 10px;
    border:1PX solid #ccc;
    border-radius: 5px;
  }
}
.detail-warp{
  height: 380px;
  margin-bottom: 10px;
  &:before{
    content: '';
    position: absolute;
    z-index: 2;
    width:100%;
    height:380px;
    background-color: rgba(0,0,0,.3);
  }
  .detail-bg-img{
    height: 380px;
  }
}
.det-serve-wrap{
  height: 500px;
  &:before{
    height: 500px;
  }
  .detail-bg-img{
    height: 500px;
  }
}
.detail-bg-img{
    z-index: 1;
    filter: blur(8px);
}
.det-downs{
  margin:20px 0;
}
.detail-top-wrap{
  z-index: 3;
}
.detail-top-img{
  width:220px;
  height:220px;
  margin:0 40px;
  border-radius: 35px;
}
.mint-navbar .mint-tab-item.is-selected{
    color: #FFC904;
    border-color:#FFC904;
    margin-bottom: 0;
}
.det-pay-left{
  flex-direction: column;
  align-items: flex-start;
}
.det-serve{
  padding-left: 20px;
  li{
    background-color: rgba(255,255,255,.5);
    border-radius: 10px;
    width:300px;
    padding:15px 30px;
    margin:0 20px;
    p{
      white-space: nowrap;
      &:first-child{
        margin-bottom: 10px;
      }
    }
  }
}
.detail-one{
  width:92%;
  padding:30px;
}


.swiper-serve img,.swiper-serve{
  width:340px;
}
.detail-descr{
  line-height: 1.8;
}


.comment{
  padding:.185185rem .37037rem;
}
.comment img{
  width:100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
}
.comment li{
  padding:.185185rem 0;
}
.time,.detail-ser p{flex:1;}
.empty{
  width:50%;
  margin:10% auto;
}
.gift-list{
  padding:0 20px; 
}
.gift-list-pro{
    width:80%;
    height: 30px;
    line-height: 30px;
    background: #fdeae6;
}
.gift-list-pro i{
  background: url(../assets/protra.png) no-repeat left center / cover;
}
.gift-list-pro,.gift-list-pro i{border-radius: 15px;}
.gift-list li em{
    color:#FE4937;
}
.icon-back{
  margin: 20px 0 30px;
}
</style>